<template>
	<view class="main">

		<view class="list" v-for="(i,o) in list" :key="o">
			<view class="list-head">{{i.initial}}</view>
			<view class="list-item" v-for="(n,m) in i.bcCardBuddyInfoVOList" :key="m" @click="choseItem(n)">
				<view class="list-item-l">
					<view v-show="selects.indexOf(n.friendOpenId) > -1 ">
						<u-icon name="checkmark" color="#276aee" size="33"></u-icon>
					</view>
				</view>
				<view class="list-item-r">
					<view class="list-item-r-n">{{n.name}}<text>{{n.position}}</text></view>
					<view class="list-item-r-g">公司：{{n.company}}</view>
					<view class="list-item-r-m">联系方式：{{n.mobile}}</view>
				</view>

			</view>
		</view>
		<view class="subUser" @click="subUser">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemId: '',
				list: [],
				openId: '',
				selects: [],
			}
		},
		onLoad(e) {
			let data = uni.getStorageSync('openId')
			if (data.openid) {
				this.openId = data.openid
			}
			this.itemId = e.id
			this.selects = e.selects.split(',') || []
			if (this.selects.length > 1) {
				this.selects = this.selects.filter((item, index) => this.selects.indexOf(item) === index);
			}
			console.log(this.selects)
			this.queryDefaultCard();
		},
		methods: {
			choseItem(n) {
				if (this.selects.indexOf(n.friendOpenId) > -1) {
					this.selects.splice(this.selects.indexOf(n.friendOpenId), 1)
				} else {
					this.selects.push(n.friendOpenId)
				}
			},
			async subUser() {
				let _arr = []
				this.list.map(i => {
					i.bcCardBuddyInfoVOList.map(m => {
						this.selects.map(n => {
							if (m.friendOpenId == n) {
								m.openid = m.friendOpenId
								_arr.push(m)
							}
						})
					})
				})
				let res = await this.$api.addBatch({
					userList: _arr,
					rvId: this.itemId,
				})
				uni.$u.toast(res.message)
				if (res.success) {
					uni.navigateBack()
				}
			},
			async queryDefaultCard() {
				let res = await this.$api.searchDefaultCard({
					openId: this.openId,
					name: ''
				})
				if (res.success) {
					this.list = res.result
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 700rpx;
		margin: 20rpx auto;
		position: relative;
		padding-bottom: 200rpx;

		.list {
			.list-head {
				background-color: #eee;
				text-indent: 1em;
			}

			.list-item {
				color: #eee;
				background: linear-gradient(45deg, #276aee, #276aee99);
				padding: 20rpx;
				border-radius: 12rpx;
				margin: 20rpx 0;
				position: relative;
				display: flex;
				align-items: center;

				.list-item-l {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					background-color: #fff;
					margin: 0 20rpx;

					view {}
				}

				.list-item-r {
					.list-item-r-n {
						font-weight: bold;
						font-size: 33rpx;
						color: #fff;

						text {
							font-size: 28rpx;
							display: inline-block;
							margin-left: 20rpx;
						}
					}

					.list-item-r-g {
						margin: 10rpx 0;
						font-size: 28rpx;
					}

					.list-item-r-m {
						font-size: 28rpx;
					}
				}

			}
		}
	}


	.subUser {
		position: fixed;
		bottom: 40rpx;
		left: calc(50% - 200rpx);
		width: 400rpx;
		border-radius: 12rpx;
		box-shadow: 0 0 12rpx #ddd;
		background-color: #276aee;
		color: #fff;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 33rpx;
		font-weight: bold;
		word-spacing: 6rpx;
		text-align: center;
	}
</style>